<template>
  <div>
    <van-popup v-model="show" position="top" :style="{ height: '100%', background: 'rgb(250,250,250)'}">
      <div style="display: flex;justify-content: space-between;align-items: center;font-size: 14px;background: #fff;">
        <van-icon name="arrow-left" style="padding: 0 0 0 10px;font-size: 20px;" @click="$emit('shows')" />
        <van-search v-model.trim="val" shape="round" background="auto" :placeholder="ssvalue" style="flex: 1;" />
        <span style="padding: 0 20px 0 10px;" @click="searchfor(val)">搜索</span>
      </div>
      <div style="width: 100%;box-sizing: border-box;padding-right: 15px;" v-if="BOoleans['one']">
        <h5 class="one_h5">
          历史搜索
          <van-icon name="delete-o" size="18px" @click="dia" />
        </h5>
        <span class="one_sp" v-for="(item,index) in list" @click="searchfor(item)">{{ item }}</span>
      </div>

      <van-empty description="暂无相关内容，换个词搜索看呗" v-if="BOoleans['tow']">
      </van-empty>

      <van-tabs v-if="BOoleans['tru']" title-active-color="#AEDD81" color="#AEDD81" line-width="30">
        <van-tab title="全部">
          <div style="background: rgba(240, 240, 240, .3);height: 6px;"></div>
          <List :list="unlist"></List>
        </van-tab>
        <van-tab title="菜谱">
          <div style="background: rgba(240, 240, 240, .3);height: 6px;"></div>
          <List :list="unlist"></List>
        </van-tab>
        <van-tab title="内容">
          <div style="background: rgba(240, 240, 240, .3);height: 6px;"></div>
          <List :list="unlist"></List>
        </van-tab>
      </van-tabs>
    </van-popup>

  </div>
</template>

<script>

import { Dialog } from 'vant';
import List from '@/components/list.vue'
export default {
  mounted() {
    let _ = require('lodash');
    this.list=_.uniq(JSON.parse(localStorage.getItem('list')))||[]
    let i = 0
    setInterval(() => {
      if(i===this.ssvalues.length) i = 0
      this.ssvalue = this.ssvalues[i]
      i++
    }, 1600);
  },
  components:{
    List,
    Dialog
  },
  props: {
    show: {
      type: Boolean
    },
  },

  data() {
    return {
      ssvalue:'搜索菜谱丶食材',
      val: '',
      BOoleans: {
        "one": true,
        "tow": false,
        "tru": false
      },
      res: [
        '你好', '你不好'
      ],
      list:[],
      unlist: [
        {
          id: 1,
          img: 'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒',
          cheap: '满99减20',
          describe: '天然果香|清甜爽口|100%果汁',
          primary: '34.00'
        },
        {
          id: 2,
          img: 'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '箱',
          primary: '34.00'
        },
        {
          id: 3,
          img: 'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '件',
          cheap: '满99减20',
          describe: '天然果香|清甜爽口|100%果汁',
        },
        {
          id: 4,
          img: 'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒'
        },
        {
          id: 5,
          img: 'https://img1.baidu.com/it/u=1894489640,257262556&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          title: '澳门永辉传统蛋卷200g',
          notes: '预计明日达',
          price: '29.00',
          unit: '盒'
        },
      ],
      ssvalues:[
      '搜索菜谱丶食材','秋天的第一杯农药','冬天的十根铁石心肠'
      ]
    }
  },
  methods: {
    dia(){
      Dialog.confirm({
        width:280,
  message: '是否清空搜索记录',
})
  .then(() => {
    this.list=[];
    // on confirm
  })
  .catch(() => {
    // on cancel
  });
    },
    isBOlean(key) {
      Object.keys(this.BOoleans).map(item => {
        if (item == key) {
          this.BOoleans[item] = true
        } else {
          this.BOoleans[item] = false
        }
      })
    },
    searchfor(item) {
      this.val=item
      if (this.val == '') {
        console.log("空");
        this.isBOlean("one")
        console.log(this.BOoleans);
      } else {
        // axios(this.val).then(res=>{
        // if(res.data.code == 200){
        //  
        // }else{
        // 
        // }
        // 
        // })
        if (this.res.some(item => item == this.val)) {
          this.list=[...this.list,this.val]
          localStorage.setItem('list',JSON.stringify(this.list))
          console.log("正确");
          this.isBOlean("tru")
          console.log(this.BOoleans);
        } else {
          this.list=[...this.list,this.val]
          localStorage.setItem('list',JSON.stringify(this.list))
          console.log("错误");
          this.isBOlean("tow")
          console.log(this.BOoleans);
        }

      }
    }
  },
}
</script>

<style lang="scss" scoped>
.one_h5{
  width: 100%;
  padding: 10px 0 10px 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  color: #333;
}
.one_sp{
  display: inline-block;
  margin:0 0 8px 15px;
  background: #fff;
  font-size: 14px;
  padding: 4px 6px;
  border-radius:9px ;
}
</style>